<template>
	<view>
		<view>
			<uni-section title="文件类型" type="line">
				<ljs-treeChoose v-model="ljs_tree3.department" :ids="ljs_tree3.chooseIds" :props="ljs_tree3.props"
					:showAllLevels="ljs_tree3.showAllLevels" :checkStrictly="ljs_tree3.checkStrictly" chooseMode="ico"
					@getChooseValue="ljs_tree3GetChooseValue">
				</ljs-treeChoose>
			</uni-section>
			<uni-section title="点击拍照" type="line">
				<view class="uni-file-picker__container" style="margin-left: 2%;">
					<view class="file-picker__box" v-for="(item,index) in imageList" :key="index">
						<view class="file-picker__box-content">
							<image class="file-image" :src="item" mode="aspectFill"
								@click.stop="prviewImage(item,index)">
							</image>
							<view class="icon-del-box" @click.stop="delFile(index)">
								<view class="icon-del"></view>
								<view class="icon-del rotate"></view>
							</view>
						</view>
					</view>
					<view class="file-picker__box">
						<view class="file-picker__box-content is-add" @click="choose">
							<slot>
								<view class="icon-add"></view>
								<view class="icon-add rotate"></view>
							</slot>
						</view>
					</view>
				</view>
				<view style="height: 70px;margin-top: 1%;padding-bottom: 2%;">
					<button class="mini-btn " style="width: 50%; margin-left: 25%;" @click="upload"
						type="primary">保存</button>
				</view>
			</uni-section>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view style="width:35vh;height:15vh;/">
				<button type="primary" style="width:15vh; margin-top:2vh;" @click="photo">拍照</button>
				<button type="primary" style="width:15vh; margin-top:1vh;" @click="album">相册</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getFileType
	} from '@/api/system/document.js'
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				Data: {},
				imageList: [],
				filePath: [],
				intervalId: "",
				department: [],
				ljs_tree3: {
					departmentTag: false,
					department: [],
					departmentName: "",
					showAllLevels: false, // 是否返回完整路径数据集
					checkStrictly: true, // 任意级都可选
					chooseIds: [], // 选择tree的id数据结果集合
					props: {
						label: 'dictName',
						id: 'dictCode',
						children: 'children'
					},
				}
			}
		},
		created() {
			// 原始数据
			this.FileType();
		},
		onLoad(params) {
			//console.log(params.parme)
			this.Data = JSON.parse(params.parme)
		},
		methods: {
			// 单选，任意级都可选 - 获取
			// ids: 集合
			// items: 节点对象集合
			ljs_tree3GetChooseValue(ids, items) {
				console.log(ids, items[0].dictName)
				this.ljs_tree3.chooseIds = ids;
				this.ljs_tree3.departmentName = items[0].dictName
			},
			FileType() {
				getFileType().then(res => {
					this.ljs_tree3.department = JSON.parse(JSON.stringify(res.data).myReplace("null", "[]"));
					//console.log(this.ljs_tree3.department)
				})
			},
			choose() {
				this.$refs.popup.open();
			},
			photo() {
				this.$refs.popup.close();
				var camera = plus.camera.getCamera() // 获取camera对象
				var resolution = camera.supportedImageResolutions // 获取字符串数组，摄像头支持的摄像分辨率
				camera.captureImage((res) => {
					console.log(res)
					this.imageList.push(res)
					console.log(this.imageList)
				}, (error) => {
					console.log(error)
				}, {
					resolution: resolution[resolution.length - 1],
					format: "jpg"
				})
			},
			album() {
				var that = this;
				this.$refs.popup.close();
				uni.chooseImage({
					count: 1000, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths))
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							that.imageList.push(res.tempFilePaths[i]);
						}
					}
				});
			},
			upload() {
				if( this.ljs_tree3.departmentName===""){
					this.$modal.msgError("文件类型为空！");
					return
				}
				if( this.imageList.length===0){
					this.$modal.msgError("上传文件为空！");
					return
				}
				this.$modal.loading("保存中，请耐心等待...")
				const baseUrl = config.baseUrl;
				let files = [];
				let that = this;
				for (var i = 0; i < this.imageList.length; i++) {
					const path = this.imageList[i];
					const splitArray = path.split("/");
					const substring = splitArray[splitArray.length - 1];
					files.push({
						"name": substring,
						"uri": this.imageList[i],
					})
				}
				//console.log(files)
				const uploadTask = uni.uploadFile({
					url: baseUrl + '/development/v9/bcBenchJhController/uploadFile', //仅为示例，非真实的接口地址
					files: files,
					//name: 'file',
					formData: {
						"jobId": that.Data.jobId,
						"procFileType": that.ljs_tree3.chooseIds,
						"treeName": that.ljs_tree3.departmentName
					},
					header: {
						'Authorization': getToken()
					},
					success: (uploadFileRes) => {
						console.log();
						if(JSON.parse(uploadFileRes.data).code==200){
							this.$modal.closeLoading();
							this.$modal.msgSuccess("保存成功");
							setTimeout(function() {
								uni.navigateBack({
									delta: 1 // 返回的页面数，这里设置为1表示返回上一页
								});
							}, 1000);
						}else{
							this.$modal.closeLoading();
							this.$modal.msgError("保存失败");
						}
					},
					fail:(uploadFileRes) => {
						this.$modal.closeLoading();
						this.$modal.msgError("保存失败");
					},
				});
				uploadTask.onProgressUpdate((res) => {
					//console.log('上传进度' + res.progress);
					//console.log('已经上传的数据长度' + res.totalBytesSent);
					//console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
				});
			},
			delFile(indexs) {
				var file = this.imageList;
				this.imageList = file.filter(function(value, index) {
					return index !== indexs; // 返回下标不为2的元素组成的新数组
				});
			},
			prviewImage(img, index) {
				let urls = []
				if (this.disablePreview) return
				this.imageList.forEach(i => {
					urls.push(i)
				})
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
		}
	}
</script>

<style>
	.myInput {
		padding: 30upx;
	}

	.input {
		width: 100%;
		height: 80upx;
		border: 2upx solid #ccc;
		border-radius: 10upx;
		font-size: 32upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.uni-file-picker {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		overflow: hidden;
		width: 100%;
		/* #endif */
		flex: 1;
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;

	}

	.file-picker__box {
		background-color: #fff;
		position: relative;
		/* 	// flex: 0 0 33.3%; */
		width: 15%;
		padding-top: 15%;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.uni-file-picker__container {
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-wrap: wrap;
		margin: -5px;
	}

	.file-picker__box-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 5px;
		border: 1px #eee solid;
		border-radius: 5px;
		overflow: hidden;
	}

	.file-picker__progress {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		/* border: 1px red solid; */
		z-index: 2;
	}

	.file-picker__progress-item {
		width: 100%;
	}

	.file-picker__mask {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		color: #fff;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.file-image {
		width: 100%;
		height: 100%;
	}

	.is-add {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.icon-add {
		width: 50px;
		height: 5px;
		background-color: #f1f1f1;
		border-radius: 2px;
	}

	.rotate {
		position: absolute;
		transform: rotate(90deg);
	}

	.icon-del-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 3px;
		right: 3px;
		height: 26px;
		width: 26px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
		transform: rotate(-45deg);
	}

	.textarea-a {
		border: 1px #eee solid;
		width: 90%;
		height: 120px;
		margin-left: 5%;
	}

	.icon-del {
		width: 15px;
		height: 2px;
		background-color: #fff;
		border-radius: 2px;
	}

	::v-deep .is-disabled {
		color: black !important;
	}
</style>